<template>
  <div class="release">
    <el-form ref="formRef" :model="form" label-width="120px">
      <el-form-item label="产品图片">
        <!-- 上传图片 -->
        <el-upload
          class="avatar-uploader"
          action="https://jsonplaceholder.typicode.com/posts/"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><plus /></el-icon>
        </el-upload>
        <!--  -->
      </el-form-item>
      <el-form-item label="产品名称">
        <el-input v-model="form.cartname"></el-input>
      </el-form-item>
      <el-form-item label="产品编号">
        <el-input v-model="form.id"></el-input>
      </el-form-item>
      <el-form-item label="添加时间">
        <el-col :span="11">
          <el-date-picker
            v-model="form.time"
            type="date"
            placeholder="选择时间"
            style="width: 100%"
          ></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="是否隐藏">
        <el-radio-group v-model="form.flag">
          <el-radio label="显示"></el-radio>
          <el-radio label="隐藏"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit(form)">添加</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { release } from "../../../../util/manageSetup/manageUpdata";
import { ElForm, ElFormItem, ElInput } from "element-plus";
import { Plus } from "@element-plus/icons-vue";
import { reactive } from "vue";
export default {
  setup() {
    const {
      onSubmit,
      imageUrl,
      handleAvatarSuccess,
      beforeAvatarUpload,
      error,
    } = release();
    const form = reactive({
      goodsImg: "",
      cartname: "",
      id: "",
      time: "",
      flag: "",
    });

    return {
      onSubmit,
      form,
      imageUrl,
      handleAvatarSuccess,
      beforeAvatarUpload,
      error,
    };
  },
  components: {
    ElForm,
    ElFormItem,
    ElInput,
    Plus,
  },
};
</script>

<style lang="less" scoped>
.release {
  margin-top: 20px;
  padding: 20px;
  width: 100%;
  background-color: white;
  box-shadow: 0px 2px 6px 0px rgb(87, 87, 87);
  //上传
  /deep/.avatar-uploader .el-upload {
    border: 1px dashed #141414;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
}
</style>
